<template>
  <a-modal
    width="800px"
    title="新增用户"
    :visible="visible"
    :bodyStyle="bodyStyle"
    :maskClosable="false"
    :centered="false"
    :confirmLoading="confirmLoading"
    :destroyOnClose="true"
    @cancel="handleCancel"
    @ok="handleOk">
    <div class="form-container">
      <a-form-model
        ref="useAddForm"
        :model="form"
        :rules="rules"
        :label-col="formLayout.labelCol"
        :wrapper-col="formLayout.wrapperCol">
        <a-form-model-item label="姓名" prop="name">
          <a-input v-model="form.name" placeholder="请输入姓名"/>
        </a-form-model-item>
        <a-form-model-item label="年龄" prop="age">
          <a-input-number style="width: 100%;" v-model="form.age" placeholder="请输入年龄"/>
        </a-form-model-item>
        <a-form-model-item label="出生日期" prop="birthday">
          <a-date-picker
            v-model="form.birthday"
            type="date"
            placeholder="请选择日期"
            style="width: 100%;"
            valueFormat="YYYY-MM-DD"
          />
        </a-form-model-item>
        <a-form-model-item label="学历" prop="education">
          <a-select
            v-model="form.education"
            placeholder="请选择学历"
          >
            <a-select-option v-for="eduItem in educations"
              :key="eduItem.id"
              :value="eduItem.value">
              {{ eduItem.value }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="地址">
          <a-input v-model="form.address" placeholder="请输入地址"/>
        </a-form-model-item>
        <a-form-model-item label="是否锁定">
          <a-radio-group v-model="form.isLock">
            <a-radio :value="1">
              是
            </a-radio>
            <a-radio :value="0">
              否
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
      </a-form-model>
    </div>
  </a-modal>
</template>

<script>
import { educations } from '@/enum/enum-common'

const defaultBodyStyle = {
  height: "450px",
  overflow: "auto",
  padding: "20px"
}

const defaultFormData = {
  "id": '',
  "name": "",
  "birthday": "",
  "isLock": 0,
  "score": 473,
  "age": '',
  "status": 0,
  "education": undefined,
  "address": "",
  "createTime": "1988-02-17 05:27:02"
}

export default {
  name: "UserAddModal",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    // 模式：add-添加 edit-修改
    model: {
      type: String,
      default: 'add'
    }
  },
  data() {
    return {
      width: '800px',
      bodyStyle: defaultBodyStyle,
      confirmLoading: false,
      formLayout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 18 }
      },
      form: {...defaultFormData},
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        birthday: [
          { required: true, message: '请输入日期', trigger: 'change' },
        ],
        education: [
          { required: true, message: '请选择学历', trigger: 'change' },
        ],
        age: [
          { required: false, message: '请输入年龄', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    educations () {
      return educations.map((item, index) => {
        return {
          id: index + 1,
          value: item
        }
      })
    },
    modalForm () {
      return this.$refs.useAddForm
    },
    // 是否是编辑modal
    isEditModel () {
      return this.model == 'edit'
    }
  },
  methods: {
    /** 点击确定 */
    handleOk() {
      this.modalForm.validate(valid => {
        if (valid) {
          let formData = {...this.form}
          if (!this.isEditModel) {
            formData.id = +new Date()
          }
          this.$emit('success', formData)
          this.handleResetForm()
        } else {
          return false
        }
      });
    },
    /** 点击取消 */
    handleCancel() {
      this.handleResetForm()
      this.$emit('cancel')
    },
    /** 重置表单数据 */
    handleResetForm () {
      this.formData = {...defaultFormData}
      this.modalForm.resetFields()
      this.modalForm.clearValidate()
    },
    /** 设置表单数据 */
    handleSetForm (userItem) {
      this.form = {...userItem}
    }
  },
}
</script>

<style lang="scss" scoped>

</style>